<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
	<link rel="stylesheet" href="../../static/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../static/css/ylb.css">
	<link rel="shortcut icon" href="../../static/img/logo.png">
	<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../static/js/bootstrap.min.js"></script>
</head>
<body>

<div id="app">
	
	<!--formBox-->
	<div class="formBox">
	    
	    <!--header-->
	    <div class="header-box">
	        <img src="../../static/img/index_logo.png" />
	    </div>
	    <div class="line"></div>
	    <!--form-->
	    <div class="form-box">
	        <form onsubmit="return false" id="findCheck">
    	        <label>账号</label>
    	        <input type="text" class="form-control" autocomplete="off" placeholder="输入管理员账号" name="user_name" id="user_name" />
    	        <label>邮箱</label>
    	        <input type="email" class="form-control" placeholder="输入管理员邮箱" name="user_email" id="user_email" />
    	        
    	        <!--密保问题，账号和邮箱核对正确才会显示出来-->
    	        <span id="getMibaoSuccess" style="display:none;">
    	            <label></label>
    	            <input type="text" class="form-control" placeholder="输入密保问题答案" name="user_mb_answer" />
    	        </span>
    	        
    	        <!--密保验证通过-->
    	        <span id="findCheckPass" style="display:none;">
    	            <label>新密码</label>
    	            <input type="text" class="form-control" placeholder="输入新密码" name="user_pass" />
    	        </span>
    	        
    	        <!--提交按钮-->
    	        <span id="actionCheck" style="display:none;">
    	            <button class="form-control-login" onclick="findCheck();">验证账号</button>
    	        </span>
    	        <a href="./" class="findPass" id="findPass">登录账号</a>
    	        
	        </form>
	    </div>
	    
	</div>
	<!--result-->
	<p class="loginresult"></p>

</div><!-- app -->


<script type="text/javascript">

// 初始化
$('#findPass').text('输入正确的账号和邮箱会显示下一步')

// 监听账号的输入
$('#user_name').on('input propertychange', function(){
    
    var user_name = $('#user_name').val();
    var user_email = $('#user_email').val();
    getfindCheckmibao(user_name, user_email);

})

// 监听邮箱的输入
$('#user_email').on('input propertychange', function(){
    
    var user_name = $('#user_name').val();
    var user_email = $('#user_email').val();
    getfindCheckmibao(user_name, user_email);
 
})

// 获取密保问题
function getfindCheckmibao(user_name, user_email){
    
    $.ajax({
        type: "POST",
        url: "./getfindCheckmibao.php?user_name="+user_name+"&user_email="+user_email,
        success: function(res){
            
            // 成功
            if(res.code == 200){
                
                // 操作反馈（200状态码）
                // 将密保问题显示出来
                $('#getMibaoSuccess label').text(res.user_mb_ask);
                $('#getMibaoSuccess').css('display','block');
                // 将验证结果的按钮也显示出来
                $('#findPass').text('登录账号')
                $('#actionCheck').css('display','block');
                
            }else{
                
                // 将密保问题和验证按钮隐藏
                $('#getMibaoSuccess').css('display','none');
                $('#actionCheck').css('display','none');
            }
        },
        error: function() {
            
            // 服务器发生错误
            showErrorResult('服务器发生错误！可按F12打开开发者工具点击Network或网络查看返回信息进行排查！')
        }
    });
}

// 验证账号、邮箱、密保是否符合
function findCheck(){
    
    $.ajax({
        type: "POST",
        url: "./findCheck.php",
        data: $('#findCheck').serialize(),
        success: function(res){
            
            // 成功
            if(res.code == 200){
                
                // 操作反馈（200状态码）
                // 将新密码输入框显示出来
                $('#findCheckPass').css('display','block');
                $('#actionCheck').html('<button class="form-control-login" onclick="setNewPass();">确认新密码</button>');
            }else{
                
                // 操作反馈（非200状态码）
                // 将新密码输入框隐藏
                $('#findCheckPass').css('display','none');
                $('#actionCheck').html('<button class="form-control-login" onclick="findCheck();">验证账号</button>');
                showErrorResult(res.msg)
            }
        },
        error: function() {
            
            // 服务器发生错误
            showErrorResult('服务器发生错误！可按F12打开开发者工具点击Network或网络查看返回信息进行排查！')
        }
    });
}

// 确认新密码
function setNewPass(){
    
    $.ajax({
        type: "POST",
        url: "./setNewPass.php",
        data: $('#findCheck').serialize(),
        success: function(res){
            
            // 成功
            if(res.code == 200){
                
                // 操作反馈（200状态码）
                showSuccessResult(res.msg)
                
            }else{
                
                // 操作反馈（非200状态码）
                showErrorResult(res.msg)
                
            }
        },
        error: function() {
            
            // 服务器发生错误
            showErrorResult('服务器发生错误！可按F12打开开发者工具点击Network或网络查看返回信息进行排查！')
        }
    });
}

// 打开操作反馈（操作成功）
function showSuccessResult(content){
    $('#app .loginresult').html('<div class="success">'+content+'</div>');
    $('#app .loginresult .success').css('display','block');
    setTimeout('hideResult()', 2500); // 2.5秒后自动关闭
}

// 打开操作反馈（操作失败）
function showErrorResult(content){
    $('#app .loginresult').html('<div class="error">'+content+'</div>');
    $('#app .loginresult .error').css('display','block');
    setTimeout('hideResult()', 2500); // 2.5秒后自动关闭
}

// 关闭操作反馈
function hideResult(){
    $("#app .loginresult .success").css("display","none");
    $("#app .loginresult .error").css("display","none");
    $("#app .loginresult .success").text('');
    $("#app .loginresult .error").text('');
}

</script>


</body>
</html>